<template>
  <div class="dashboard-container">
    <h2 class="head-big-title">{{detailData.productName}}
      <div style="float: right;margin-right: 7%;cursor: pointer;" @click="$router.push({path:'/Shop/Shopping-Cart'})">
        <svg-icon v-if="tableData.length > 0" icon-class="gouwucheman" style="font-size: 24px;margin-right: 10px;position: relative;bottom: 5px" />
        <svg-icon v-else icon-class="gouwuchekong" style="font-size: 24px;margin-right: 10px;position: relative;bottom: 5px" />
        <p style="display: inline-block;font-size: 14px;"><span>{{ $formatMoneyStr(total) }}</span><span style="display: block;">{{ tableData.length }} barang</span></p>
      </div>
    </h2>
    <el-input
      round
      placeholder="Search"
      v-model="searchProductName"
      @blur="searchProduct"
      prefix-icon="el-icon-search"
      style="width: 95%;margin: 10px 0;padding-left:20px;"></el-input>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <el-card class="filter-container" shadow="never" style="width: 92%;margin: 0 4%;">
      <div style="width: 98%;display: block;float: left;margin: 0 1%;">
        <el-image
          style="width: 96%;margin: 0 2%;padding: 0;"
          :src="picbase + imgSrc">
          <div slot="placeholder" class="image-slot show-pic">
            <i class="el-icon-loading" />
          </div>
          <div slot="error" class="image-slot show-pic">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <el-carousel :interval="5000" height="60px" style="margin-top: 10px;width: 100%;">
          <el-carousel-item style="text-align: center;">
            <el-image
              v-for="item in srcList"
              style="width: 21%;height: auto;margin-right: 4%;"
              :src="picbase + item.picUrl"
              @click="changePic(item)">
              <div slot="placeholder" class="image-slot small-pic">
                <i class="el-icon-loading" />
              </div>
              <div slot="error" class="image-slot small-pic">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="width: 96%;display: inline-block;text-align: left;">
        <h2 class="head-big-title">{{detailData.productName}}</h2>
        <el-divider></el-divider>
        <p class="middle-info"><label>Jenama:</label>{{detailData.brand}}</p>
        <p class="middle-info"><label>Model Produk:</label>{{detailData.productModel}}</p>
        <p class="middle-info"><label>Tempoh Penghantaran:</label>{{detailData.productSku.deliveryDay + ' Hari'}}</p>
        <p class="middle-info"><label>Ketersediaan:</label>{{detailData.productSku.stock}}</p>
        <p class="middle-info"><label>Berat:</label>{{detailData.productSku.weight +' kg'}}</p>
        <p class="middle-info"><label>Dimensi:</label>{{detailData.productSku.length}} * {{detailData.productSku.width}} * {{detailData.productSku.height + ' cm'}}</p>
        <p class="middle-info" v-if="role == dealerValue"><label>UOM:</label>{{'1 ' + detailData.productSku.masterUnit}}</p>
        <p class="middle-info" v-else><label>UOM:</label>{{'1 ' + detailData.productSku.unit}}</p>
        <el-divider></el-divider>
        <h2 class="head-big-title" v-show="role ==dealerMValue">
          {{$formatMoneyStr(detailData.priceMasterDealer) + ' * ' + detailData.productSku.exchangeNum + ' = ' + $formatMoneyStr(detailData.priceMasterDealer*detailData.productSku.exchangeNum) }}
        </h2>
        <h2 class="head-big-title" v-show="role ==dealerValue">{{$formatMoneyStr(detailData.priceDealer)}}</h2>
        <el-divider></el-divider>
        <label style="display: block;margin-bottom: 5px;">QTY</label>
        <el-input-number :min="detailData.productSku.moq" v-model="addGoodData.quantity"></el-input-number>
        <el-button round type="warning" @click="addNewGood" style="display: block;margin-left: 32px;margin-top: 32px">Tambah ke troli</el-button>
      </div>
      <div style="width: 100%;display: block;float: left;margin-bottom: 32px;">
        <h2 style="line-height: 42px;margin-top: 30px;">Penerangan</h2>
        <p>{{ detailData.description }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { order_addtocartApi, query_shop_detailsProductApi, order_querycartApi } from '@/api/user'

export default {
  name: 'Activityrecord',
  computed: {
    ...mapGetters([
      'name',
      'role',
      // 'shopCart'
    ])
  },
  data() {
    return {
      tableData: [],
      detailData: {
        productSku: {}
      },
      addGoodData: {
        quantity: 1
      },
      imgSrc: '',
      searchProductName: '',
      orderChart: '',
      count: 1,
      srcList: [],
      total: 0,
    }
  },
  created() {
    this.checkID()
  },
  mounted() {
    this.getShopCart()
  },
  methods: {
    checkID() {
      const id = this.$route.params.id
      if (!(id.length && id.length > 0)) {
        this.$router.push({ path: '/Shop/Query' })
      }
      query_shop_detailsProductApi({
        id: id
      }).then(res => {
        this.detailData = res.data
        if (res.data.productSku == null) {
          this.detailData.productSku = {}
        }
        this.srcList = res.data.picList
        this.addGoodData.quantity = res.data.productSku.moq
        if (this.srcList) {
          if (this.srcList.length) {
            if (this.srcList.length > 0) {
              this.imgSrc = res.data.picList[0].picUrl
            }
          }
        }
      }).catch(err => {
        console.log(err)
        this.$router.push({ path: '/Shop/Query' })
      })
    },
    searchProduct() {
      if (this.searchProductName) {
        if (this.searchProductName.length > 0) {
          this.$router.push({
            name: 'queryShop',
            params: {
              id: this.searchProductName
            }
          })
        }
      }
    },
    addNewGood() {
      this.addGoodData.productId = this.detailData.productId
      order_addtocartApi(this.addGoodData).then(res => {
        this.$message({
          message: 'Berjaya tambah!',
          type: 'success'
        })
        this.$router.push({ path: '/Shop/Shopping-Cart' })
      }).catch(err => {
        console.log(err)
      })
    },
    changeNew() {
      this.$forceUpdate()
    },
    changePic(item) {
      this.imgSrc = this.picbase + item.picUrl
    },
    getShopCart() {
      order_querycartApi().then(res => {
        this.total = 0
        if (res.data) {
          if (res.data.length) {
            if (res.data.length > 0) {
              this.tableData = res.data
              for (let i = 0; i < res.data.length; i++) {
                this.total = this.total + res.data[i].total
              }
              return
            }
          }
        }
        this.tableData = []
        this.total = 0
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .middle-info{
    text-align: left;
    margin: 20px 0 20px 3%;
  }
  .middle-info label{
    width: 166px;
    display: inline-block;
  }
  .show-pic{
    text-align: center;
    i{
      font-size: 48px;
      line-height: 288px;
    }
  }
  .small-pic{
    text-align: center;
    i{
      font-size: 32px;
      line-height: 88px;
    }
  }
  span .el-icon-search{
    padding-left: 18px;
  }
</style>
<style scoped>
/deep/ .el-input__prefix{
  left: 25px;
}
</style>
